<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <script type="text/javascript" src="../../common/js/public.js"></script>
    <script type="text/javascript" src="../../common/js/publicUtils.js"></script>
    <!--<![endif]&ndash;&gt;-->
</head>
<body >
<div class="layui-fluid" id="flowDiv" onload="onLoad()" >
    <div class="zTreeBackground left" style="float: left;width:300px">
        <div class="titlediv">
            <p style="text-align:right;background-color:white;line-height: 30px">
                组织信息<i class="layui-icon layui-icon-refresh" style="margin-left: 36%" onclick="loadTree()"></i>&ensp;&ensp;
            </p>
        </div>
        <div class="searchdiv" >
            <div class="layui-input-inline" style="width:100%">
                <input type="text" id="keyword" name="keyword" autocomplete="off" class="layui-input" placeholder="请输入关键字查询"/>
                <i onclick="searchByName()" class="layui-icon layui-icon-search" style="position: absolute;top:8px;right: 8px;"></i>
            </div>
        </div>
        <div class="ztreediv" id="ztreediv" style="overflow:auto">
            <div class="ztreeuldiv">
                <ul id="treeStructure" class="ztree"></ul>
            </div>
        </div>
    </div>
    <div class="zTreeBackground right" style="float: left; padding-left:1%;width:70%">
        <div class="layui-form-item" style="width:99%;margin-bottom:-10px;text-align:right;">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="name" autocomplete="off" class="layui-input" placeholder="请输入用户名"/>
                    <i class="layui-icon layui-icon-search" style="position: absolute;top:8px;right: 8px;" onclick="easysearch()"></i>
                </div>
            </div>
            <!--<button type="button" style="margin-left:12px;margin-top: -12px;" class="layui-btn layui-btn-normal" onclick="moresearch()"><i class="layui-icon layui-icon-search"></i>高级搜索</button>-->
        </div>
        <table class="layui-table layui-form" id="datatable" lay-filter="data-table">
        </table>
        <script type="text/html" id="toolbar"></script>
    </div>
    <!--<div class="layui-row layui-col-space15">-->

        <!--<div class="layui-col-md4 treetool" id="flowDiv" onload="onLoad()">-->

        <!--</div>-->
        <!--<div class="layui-col-md8">-->
            <!--<input type="button" value="获取选中项" onclick="getSelectNode()"/>-->
            <!--<input type="button" value="获取check项" onclick="getCheckNode()"/>-->
            <!--<input type="button" value="刷新选中项" onclick="refreshSelectNode()"/>-->
        <!--</div>-->
    <!--</div>-->
</div>
</body>
<SCRIPT type="text/javascript">
    var zTreeObj,zTreeObj_input,zTreeObj_input_button;
    var form;
    var table;
    var orgId;
    var orgName;
    var positionMap,sexMap,typeMap,stateMap;
    var type;
    var initFlag=true;
    layui.use(['form', 'layer'], function() {
        form = layui.form;
        layer = layui.layer;
        table = layui.table;


    });
    $(function(){
        positionMap=getDic("UserPosition");
        sexMap=getDic("UserSex");
        typeMap=getDic("UserType");
        stateMap=getDic("UserState");
        loadbutton("toolbar");//加载按钮loadbutton(id)，id为button容器id，不传默认为buttongroup
        loadTree();
        // loadTable();

    });
    window.onload = getContentSize;
    window.onresize = getContentSize;

    /**
     * 页面自适应
     */
    function getContentSize() {
        var wh = document.documentElement.clientHeight;
        var eh = 30;
        ch = (wh - eh) + "px";
        document.getElementById( "flowDiv" ).style.height = ch;
        document.getElementById( "ztreediv" ).style.height = (wh - eh - 50)+"px";
        document.body.style.height = (wh)+"px";
        $(".zTreeBackground.right").css("width",($(document).width()-380)+'px');//自适应表格处理
    }



    /**
     * 左侧树设置
     * @type {{check: {enable: boolean}, data: {simpleData: {enable: boolean, idKey: string, pIdKey: string, isParent: string, rootPid: number}}, callback: {beforeClick: zTreeBeforeClick, onClick: zTreeOnClick}}}
     */
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false,
            nameIsHTML: true
        },
        check: {
            //enable: true,
            chkboxType:  { "Y": "", "N": "" }
        },
        edit:{
            enable: false,
        },
        // async: {
        //     enable: true,
        //     url: "./sysmenu/selectMenuByPid",
        //     dataFilter: formatedata,
        //     autoParam: ["id"]
        // },
        data: {
            simpleData: {
                enable: true,
                idKey:"id",
                pIdKey:"parentId",
                isParent:"parent",
                rootPid:-1
            },
            key: {
                url: "xUrl",
                icon:"xIcon",
                name:"shortName"
            }
        },
        callback: {
            // beforeClick: zTreeBeforeClick,
            onClick: zTreeOnClick
        }
    };


    <!-- 高亮显示查询开始 -->
    /**
     * 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
     * @param treeId
     * @param searchConditionId     搜索条件Id
     * @param flag                  需要高亮显示的节点标识
     */
    function query11() {
        //<1>.搜索条件
        var searchCondition = $('#keyword').val();
        //<2>.得到模糊匹配搜索条件的节点数组集合
        var highlightNodes = new Array();
        if(searchCondition != "") {
            var treeObj = zTreeObj;
            highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
        }
        //<3>.高亮显示并展示【指定节点s】
        highlightAndExpand_ztree( highlightNodes, searchCondition, false);
    }

    /**
     * 高亮显示并展示【指定节点s】
     * @param treeId
     * @param highlightNodes 需要高亮显示的节点数组
     * @param flag           需要高亮显示的节点标识
     */
    function highlightAndExpand_ztree(highlightNodes, tx, flag) {
        var treeObj = zTreeObj;
        //<1>. 先把全部节点更新为普通样式
        var treeNodes = treeObj.transformToArray(treeObj.getNodes());
        for(var i = 0; i < treeNodes.length; i++) {
            treeNodes[i].highlight = false;
            treeObj.updateNode(treeNodes[i]);
            // var t = treeNodes[i].name;
            //  t = t.replace("<span style='background-color: yellow;color:red'>", '');
            //  t = t.replace("</span>", '');
            //  console.log(t+'---------');
            // treeNodes[i].name = t;
        }
        //<2>.收起树, 只展开根节点下的一级节点
        close_ztree();
        //<3>.把指定节点的样式更新为高亮显示，并展开
        if(highlightNodes != null) {
            for(var i = 0; i < highlightNodes.length; i++) {
                if(flag != null && flag != "") {
                    if(highlightNodes[i].flag == flag) {
                        //高亮显示节点，并展开
                        highlightNodes[i].highlight = true;
                        treeObj.updateNode(highlightNodes[i]);
                        //高亮显示节点的父节点的父节点....直到根节点，并展示
                        var parentNode = highlightNodes[i].getParentNode();
                        var parentNodes = getParentNodes_ztree( parentNode);
                        treeObj.expandNode(parentNodes, true, false, true);
                        treeObj.expandNode(parentNode, true, false, true);
                    }
                } else {
                    //高亮显示节点，并展开
                    //highlightNodes[i].checked = true;
                    var t = highlightNodes[i].name;
                    // t = t.replace(eval("/" + tx + "/gi"), "<span style='background-color: yellow;color:red'>" + tx + "</span>");
                    highlightNodes[i].name = t;
                    treeObj.updateNode(highlightNodes[i]);
                    //高亮显示节点的父节点的父节点....直到根节点，并展示
                    var parentNode = highlightNodes[i].getParentNode();
                    var parentNodes = getParentNodes_ztree( parentNode);
                    treeObj.expandNode(parentNodes, true, false, true);
                    treeObj.expandNode(parentNode, true, false, true);
                }
            }
        }
    }

    /**
     * 递归得到指定节点的父节点的父节点....直到根节点
     */
    function getParentNodes_ztree( node) {
        if(node != null) {
            var treeObj =treeObj;
            var parentNode = node.getParentNode();
            return getParentNodes_ztree( parentNode);
        } else {
            return node;
        }
    }

    /**
     * 收起树：只展开根节点下的一级节点
     * @param treeId
     */
    function close_ztree() {
        var treeObj = zTreeObj;
        var nodes = treeObj.transformToArray(treeObj.getNodes());
        var nodeLength = nodes.length;
        for(var i = 0; i < nodeLength; i++) {
            // if(nodes[i].id == '0') {
            //     //根节点：展开
            //     treeObj.expandNode(nodes[i], true, true, false);
            // } else {
            //非根节点：收起
            treeObj.expandNode(nodes[i], false, true, false);
        }
        // }
    }

    <!-- 高亮显示查询结束 -->
    function searchByName(){
        var search = $("#keyword").val();
        if(!search){
            return ;
        }
        $("#treeStructure").html('');
        publicAjax (null,'company/getOrgForTree',{"shortName":$("#keyword").val()},false,null,function(data){
            zTreeObj = $.fn.zTree.init($("#treeStructure"),setting, changeIcon(data.data));
            zTreeObj.expandAll(true);
        })
    }



    function query() {
        var keyword = $("#keyword").val();
        if (keyword == "") {
            loadTree();
            return;
            // //显示上次搜索后背隐藏的结点
            // zTreeObj.getNodesByParam("isHidden", true);
            // zTreeObj.showNodes(nodes);
        }

        var zTree = zTreeObj;
        var allNodes = zTree.transformToArray(zTree.getNodes());
        zTree.hideNodes(allNodes);    //当开始搜索时，先将所有节点隐藏

        var nodeList = zTree.getNodesByParamFuzzy('name', keyword, 0);    //通过关键字模糊搜索
        var arr = new Array();
        for (var i = 0; i < nodeList.length; i++) {
            arr = $.merge(arr, nodeList[i].getPath());    //找出所有符合要求的叶子节点的路径
        }
        zTree.showNodes($.unique(arr));    //显示所有要求的节点及其路径节点
        zTree.expandAll(true);    //展开路径
    }
    /* *
     * @Author bxf
     * @Description 简单搜索
     * @Date 11:35 2019/11/1
     * @param null
     * @return
     */
    function easysearch(){
        loadTable();
    }

    /**
     * 点击触发
     * @param event
     * @param treeId
     * @param treeNode
     */
    function zTreeOnClick(event, treeId, treeNode) {
        orgId=treeNode.id;
        //根据树的点击确定父级id、name
        orgName=treeNode.name;
        type=treeNode.type;
        loadTable();
        initFlag=false;
    }

    //加载右边表格
    function loadTable(){
        var width = $(".left-nav").css("width");
        $(".zTreeBackground.right").css("width",($(document).width()-380)+'px');//自适应表格处理
        layui.use(['laydate','form','table'], function(){
            var laydate = layui.laydate;
            table = layui.table;
            table.render({
                elem: '#datatable',
                size: 'sm',
                method: 'post',
                height: 'full-100',
                toolbar: '#toolbar',
                headers: {"Authorization":getData("Authorization")},
                url: publicUrl+'/orgPerson/selectAllOrgPerson', //stationId='+window.parent.window.parentId,//8AE7DECA-8E41-4FAB-8B30-9FD1B0B7FA33,78A9E5D8-20FB-4436-BBE8-A25EAC38D056
                request: {
                    limitName: 'pageSize',
                    pageName: "pageIndex"
                },
                response: {
                    statusCode: 2000
                },
                where:{
                    orgId : orgId,
                    name : $("#name").val()
                },
                parseData: function(res){ //res 即为原始返回的数据
                    return formatTableParseData(res);
                }
                ,cols: [[
                    {
                        type: 'checkbox',
                        title: '',
                        width: "80px",
                        align: 'center'
                    },
                    {
                        type: 'numbers',
                        title: '序号',
                        width: "80px",
                        align: 'center'
                    },
                    {
                        field: 'loginName',
                        title: '登录名',
                        width: "10%",
                        align: 'center'
                    },
                    {
                        field: 'name',
                        title: '用户名',
                        width: "10%",
                        align: 'center'
                    },
                    {
                        field: 'sexy',
                        title: '性别',
                        width: "6%",
                        align: 'center',
                        templet: function(d) {
                            return sexMap.get(d.sexy+"");
                        }
                    },
                    {
                        field: 'title',
                        title: '职位',
                        width: "12%",
                        align: 'center',
                        templet: function(d) {
                            return positionMap.get(d.title+"");
                        }
                    },
                    {
                        field: 'state',
                        title: '状态',
                        width: "6%",
                        align: 'center',
                        templet: function(d) {
                            return stateMap.get(d.state+"");
                        }
                    },
                    {
                        field: 'phone',
                        title: '电话',
                        width: "12%",
                        align: 'center'
                    },
                    {
                        field: 'orgName',
                        title: '所属组织',
                        width: "12%",
                        align: 'center'
                    },
                    {
                        field: 'roleName',
                        title: '角色',
                        width: "25%",
                        align: 'center'
                    }
                ]],
                page: true
            });
            // //监听行双击事件
             table.on('rowDouble(data-table)', function(obj){
                 show(obj);
             });
        });


    }

    //修改
    function edit(callback){
        var checks= table.checkStatus('datatable');
        if(checks.data.length!=1){
            layer.alert('请选中一行数据');
            return;
        }
        var url='./editperson.html?id='+checks.data[0].id+'&orgName='+checks.data[0].orgName;
        if(isEmpty(callback)){
            callback = function(index, layero) {
                var iframeWin = layero.find('iframe')[0];
                var result=iframeWin.contentWindow.submit(index, layero);
                if(!result){
                    return false;
                }
                if(result.code==2000){
                    laysuccess("修改成功");
                }else{
                    layerror("修改失败");
                }
                layer.close(index);
                reloadTable();
            }
        }
        layer.open({
            type: 2,
            area: ["1200px", "700px"],
            fix: false,
            //不固定
            shade: 0.3,
            title: "编辑人员",
            content: url,
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: false,
            yes: function(index, layero){
                var iframeWin = layero.find('iframe')[0];
                var result=iframeWin.contentWindow.submit(index, layero);
                layer.closeAll();
                reloadTable();
                return false;
            },
            btn2:callback,
            cancel: function(index) {
                return true;
            }
        });
    }

    //修改
    function move(callback){
        var checks= table.checkStatus('datatable');
        if(checks.data.length <= 0){
            layer.alert('请选中一行数据');
            return;
        }
        var data=checks.data;
        var id = new Array();
        for(var i=0;i<data.length;i++){
            id[i]=data[i].id;
        }
        var url='./moveperson.html';
        if(isEmpty(callback)){
            callback = function(index, layero) {
                var iframeWin = layero.find('iframe')[0];
                var result=iframeWin.contentWindow.submit(index, layero,id);
                if(!result){
                    return false;
                }
                if(result.code==2000){
                    laysuccess("修改成功");
                }else{
                    layerror("修改失败");
                }
                layer.close(index);
                reloadTable();
            }
        }
        layer.open({
            type: 2,
            area: ['430px', '600px'],
            fix: false,
            //不固定
            shade: 0.3,
            title: "移动人员",
            content: url,
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: false,
            yes: callback,
            cancel: function(index) {
                return true;
            }
        });
    }

    //显示详情
    function show(obj,callback){
        var url='./editperson.html?id='+obj.data.id+'&orgName='+obj.data.orgName;
        if(isEmpty(callback)){
            callback = function(index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submit(index, layero);
                layer.close(index);
                reloadTable();

            }
        }
        layer.open({
            type: 2,
            area: ["1200px", "700px"],
            fix: false,
            //不固定
            shade: 0.3,
            title: "查看人员信息",
            content: url,
            btn: ['关闭'],
            // 弹层外区域关闭
            shadeClose: false,
            cancel: function(index) {
                return true;
            }
        });
    }

    /**
     * 加载左侧树
     */
    function loadTree(keyWord){
        publicAjax ("post","/orgPerson/selectOrgTree",{},null,null,function (r) {
            var jsondata = r.data;
            zTreeObj = $.fn.zTree.init($("#treeStructure"), setting, changeIcon(jsondata));
            var treeObj = zTreeObj;
            var nodes = treeObj.getNodes();
            if (nodes.length>0) {
                for (var i = 0; i < nodes.length; i++) {
                    treeObj.expandNode(nodes[i], true, false, false);
                }
                //页面加载时，默认点击第一个节点
                if(initFlag){
                    zTreeObj.selectNode(nodes[0]);//选择点
                    zTreeObj.setting.callback.onClick(null, zTreeObj.setting.treeId, nodes[0]);//调用事件
                }
            }
        });
    }


    //新增
    function add(callback){
        if(orgId==''||orgId==null){
            layer.alert('请选择组织');
            return;
        }
        if(type!=3&&type!=2){
            layer.alert('请在【部门】或者【虚拟组织】下新增【人员】');
            return;
        }
        var url='./addperson.html?orgId='+orgId+'&orgName='+orgName;
        if(isEmpty(callback)){
            callback = function(index, layero) {
                var iframeWin = layero.find('iframe')[0];
                var result=iframeWin.contentWindow.submit(index, layero);
                if(!result){
                    return false;
                }
                if(result.code==2000){
                    laysuccess("新增成功");
                }else{
                    layerror("新增失败");
                }
                layer.close(index);
                reloadTable();
            }
        }
        var add_person = layer.open({
            type: 2,
            area: [1200 + 'px', 700 + 'px'],
            fix: false,
            //不固定
            shade: 0.3,
            title: "新增人员",
            content: url,
            btn: ['确定', '应用','关闭'],
            // 弹层外区域关闭
            shadeClose: false,
            yes: callback,
            btn2:function(index, layero){
                var iframeWin = layero.find('iframe')[0];
                var result=iframeWin.contentWindow.submit(index, layero,'applye');
                reloadTable();
                return false;
            },
            cancel: function(index) {
                return true;
            }
        });
        //layer.full(add_person);
    }

    function upload(){
        var iframeWin ;
        if(orgId==''||orgId==null){
            layer.alert('请选择组织');
            return;
        }
        if(type!=3&&type!=2){
            layer.alert('请在【部门】或者【虚拟组织】下新增【人员】');
            return;
        }
        layer.open({
            type: 2,
            area: ["500px" , "350px"],
            fix: false,
            //不固定
            shade: 0.3,
            title: "导入人员",
            content: "./importorgperson.html",
            btn: ['关闭'],
            // 弹层外区域关闭
            shadeClose: false,
            yes: false,
            cancel: function(index) {
                return true;
            },
            success: function(layero, index){
                iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.getOrgId(orgId);//添加按钮
            }
        });
    }


    //刷新表格，必须要有参数提交，否则会不刷新
    function reloadTable(){
        table.reload('datatable', {
            where:{
                a:1
            }
        });
    }





    //批量删除
    function del(){
        var checks= table.checkStatus('datatable');
        if(checks.data.length==0){
            layer.alert('请选中一行数据');
            return;
        }
        var ids=[];
        for(var i=0;i<checks.data.length;i++){
            ids[i]=checks.data[i].id;
        }
        layer.confirm('你确认删除么?', {icon: 3, title:'提示'}, function(index){
            publicAjax ("post","/orgPerson/deleteOrgPerson",{ids: ids},null,null,function (r) {
                if(r.code==2000){
                    laysuccess("删除成功");
                }else{
                    layerror(r.msg);
                }
                reloadTable();
            });
        });
    }




    function isEmpty(value) {
        if (value == null || this.trim(value) == "") {
            return true;
        }
        return false;
    }



</SCRIPT>
</html>